<template>
  <div class="worthBuy">
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar title="值得买" @click-left="onClickLeft" @click-right="onClickRight" >
        <template #left>
          <van-icon class="home" name="https://yanxuan.nosdn.127.net/f1fd4eeea3f85330d21670ca81d9c65e.png" size="22" />
        </template>
        <template #right>
          <div>
            <van-icon class="search" @click="toSearch" name="https://yanxuan.nosdn.127.net/08adb6b3db60250074afb6020dfaa6a5.png" size="22" />
            <van-icon class="cart" name="https://yanxuan.nosdn.127.net/9574d22277a2eb4819330f5591253edf.png" size="22" />
          </div>
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div class="swiperTab">
      <div class="swiperTitle">
        <div class="logo">
          <van-image
            width="60"
            height="30"
            lazy-load
            src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          />
          <span class="logoTitle">严选好物 用心生活</span>

        </div>
      </div>
      <!-- 自定义滑块宽度 -->
      <van-swipe :loop="false" :width="83" @change="onChange">
        <van-swipe-item v-for="(banner,index) in bannerListTop" :key="banner.id"   class="swiperItem">
          <div class="swiperS swiperTop">
            <van-image
              width="56.8"
              height="56.8"
              lazy-load
              :src="banner.picUrl"
              class="swiperImg"
            />  
            <span class="mainTitle">{{banner.mainTitle}}</span>
            <span class="viceTitle">{{banner.viceTitle}}</span>
          </div>
          <div class="swiperS swiperDown">
            <van-image
              width="56.8"
              height="56.8"
              lazy-load
              :src="bannerList[index+7].picUrl"
              class="swiperImg"
            />  
            <span class="mainTitle">{{bannerList[index+7].mainTitle}}</span>
            <span class="viceTitle">{{bannerList[index+7].viceTitle}}</span>
          </div>

        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            <div class="gang" :class="current === 1 &&'active'"></div>
            <div class="gang" :class="current === 2 &&'active'"></div>
            <div class="gang" :class="current === 3 &&'active'"></div>
            <div class="gang" :class="current === 4 &&'active'"></div>
          </div>
        </template>
      </van-swipe>
    </div>
    <!-- 瀑布流 -->
    <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData" height="700" :imgWidth="150">
      <div class="img-info" slot-scope="props">
        <div class="some-info top">{{props.value.info.title}}</div>
        <div class="down">
          <div class="left">
            <img class="leftImg" :src="props.value.info.avatar" alt="">
            <div class="some-info leftText">{{props.value.info.nickname}}</div>
          </div>
          <div class="right">
            <img class="rightImg" :src="'https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png'" alt="">
            <span class="rightText">{{(props.value.info.readCount)/1000>=10?Math.floor((props.value.info.readCount)/1000)+'k':props.value.info.readCount}}</span>
          </div>
        </div>
      </div>
    </vue-waterfall-easy>
    
  </div>
</template>

<script>
import { mapState } from 'vuex';
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  name: 'WorthBuy',
  data(){
    return{
       current: 1,
       imgsArr:[],
       page:1,
       size:2
    }
  },
  components:{
     vueWaterfallEasy
  },
  mounted(){
    this.getBannerList()
    this.getData()
  },
  methods:{
    //轮播图
    getBannerList(){
      this.$store.dispatch('getBannerList')
    },
    //toHome
    onClickLeft(){
      this.$router.push('/home')
    },
    // toSeach
    toSearch(){
      this.$router.push({
        path:'/search',
        query:{
          redirect:'/worth-buy'
        }
        
        })
    },
    //toCart
    onClickRight(){
      this.$router.push('/cart')
    },
    //轮播图滑动事件
    onChange(index) { 
      this.current = index+1;
    },
    //瀑布流
    async getData(){
      let {page,size} = this
      const result = await this.$API.getWaterWall(page,size)
      this.page++
      if(result.code==='200'){
        result.data.result.forEach(item=>item.topics.push(item.look))
        let imgsArr = result.data.result.map(item=>{
          return item.topics.map(itemm=>{
            return{
              src:itemm.picUrl,
              href:'https://m.you.163.com'+itemm.schemeUrl,
              info:{
                id:itemm.topicId,
                avatar:itemm.avatar,
                nickname:itemm.nickname,
                title:itemm.title,
                readCount:itemm.readCount
              }
            }
          })
        })
        this.imgsArr = this.imgsArr.concat(imgsArr.flat(Infinity))
      }
      
    },
  },
  computed:{
    ...mapState({
      bannerList:state=>state.worthBuy.bannerList
    }),
    //截取前七个对象遍历，后面七个通过bannerList的下标+7对应生成
    bannerListTop(){
      return (this.bannerList||[]).slice(0,7)
    }
  }
};
</script>

<style lang="less" scoped>
  
  .worthBuy{
    // width: 100%; 
    background-color: #eeeeee;
  }
  .header{
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    /deep/ .home{
      margin-top: 4px;
      margin-left: -3px;
    }
    /deep/ .van-nav-bar__content{
      background-color: #fafafa;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
    /deep/ .van-nav-bar__title{
      font-size: 18px;
    }
    /deep/ .search{
      margin-top: 21px;
      margin-right: 19px;
    }
    /deep/ .cart{
      margin-right:-2px ;
    }
  }
  .swiperTab{
    margin-top: 42px;
    width: 100%;
    height: 360px;
    // background-color: #fff;
    .swiperTitle{
      width: 100%;
      height: 250px;
      background:url('http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView');
      background-size:100%;
      overflow: hidden;
      .logo{
        margin-top: 40px;
        margin-left: 10px;
        display: flex;
        align-content: center;
        .logoTitle{
          // display: block;
          margin-top: 7px;
          margin-left: 5px;
          font-size: 16px;
          color: #fff;
        }
      }
    }
    .van-swipe{
      // width: 100%;
      // overflow: hidden;
      height: 270px;
      position: absolute;
      top: 130px;
      right: 0;
      left: 0;
      margin: 0 10px;
      border-radius: 10px;
      background-color: #fff;
      .swiperItem{
        font-size: 16px;
        .swiperS{
          margin-top: 20px;
          display: flex;
          text-align: center;
          flex-direction: column;
          .swiperImg{
            margin: 0 auto;
          }
          .mainTitle{
            font-size: 14px;
            font-weight: 600;
          }
          .viceTitle{
            font-size: 13px;
            color: #999;
          }
        }
      }
    }
    .custom-indicator {
      position: absolute;
      left: 50%;
      margin-left: -40px;
      bottom: 10px;
      // font-size: 12px;
      // background: rgba(0, 0, 0, 0.1);
      display: flex;
      .gang{
        width: 20px;
        height: 2px;
        background-color: #d9d9d9;
        &.active{
        background-color: #dd1a21;
      }
      }
      
    }
  }
 
  /deep/ .vue-waterfall-easy-container{
    margin: 0 5px;
  }
  /deep/ .img-inner-box{
    border-radius: 10px !important;
    overflow: hidden;
    font-size: 14px;
    width: 168px !important;
    background-color: #fff;
    .img-wraper{
      width: 168px !important;
    }
    .img-info{
      display: flex;
      flex-direction: column;
      .top{
        font-size: 12px;
        color: #333;
        border-bottom: 1px solid #fbfbfb;
        padding: 0 0 5px 10px;
      }
      .down{
        display: flex;
        justify-content: space-between;
        margin: 15px 0 8px 10px;
        .left{
          display: flex;
          align-items: center;
          .leftImg{
            width: 20px;
            height: 20px;
            border-radius: 10px;
          }
          .leftText{
            font-size: 12px;
            font-weight: 300;
            color: #666;
            margin-left: 5px;
          }
        }
        .right{
          display: flex;
          align-items: center;
          margin-right: 5px;
          .rightImg{
            width: 16px;
            height: 16px;
          }
          .rightText{
            font-size: 12px;
            color: #999;
          }
        }
      
      }
    }
  }
</style>
